Customising Widgets
Widgets are highly customizable in LiveCode Create, allowing you to tailor their appearance, behavior, and functionality to suit your app’s needs. Customizing widgets is done by adjusting their properties using the Property Inspector or by using LiveCode Script.
This guide explains how to customize widgets efficiently and highlights the key properties you can modify.
Customizing Widgets Overview
When you add a widget to your layout, it comes with default settings for its appearance and behavior. You can adjust these settings using the Property Inspector to:
- Change widget styles (e.g., colors, fonts, and sizes).
- Modify behavior (e.g., actions triggered by user interactions).
- Link widgets to data for dynamic content.
Try it out: Customize a button to have a blue background, white text, and trigger an action when clicked.
Accessing the Property Inspector
The Property Inspector is where you customize all widget properties. To access it:
- Select a Widget: Click on a widget in the Canvas Area or Project Browser.
- The Property Inspector will appear on the right-hand side of the App Building Environment.
If the Property Inspector is not visible, click the Toggle Icon in the top-right corner to show or hide it.
Key Properties You Can Customize
Here’s an overview of the main types of properties you can customize for widgets:
1. Appearance Properties
Control the visual style of widgets to match your app’s design:
- Colors: Change background, text, and border colors.
- Size and Position: Adjust the widget’s width, height, and placement on the layout.
- Text Styles: Modify font family, size, weight, alignment, and color.
- Icons: Add icons to widgets like buttons or input fields.
Example: Customizing a widget using LiveCode Script:
- Background Color: Blue
- Text Color: White
- Font Size: 16px
- Icon: Add a leading checkmark icon.
set the backgroundColor of button "SubmitButton" to "0,122,255"
set the textColor of button "SubmitButton" to "255,255,255"
set the fontSize of button "SubmitButton" to 16
set the icon of button "SubmitButton" to "checkmark-icon"
2. Behavior Properties
Define how a widget behaves when users interact with it:
- Actions: Set up workflows to respond to events like clicks, input changes, or selections.
- States: Control widget states, such as disabled, focused, or active.
- Visibility: Show or hide widgets dynamically.
Try it out: Trigger an action when a button is clicked.
- Select the button.
- Right click and select Edit Actions.
- Create an onMouseUp workflow to perform tasks.
3. Data Binding Properties
Connect widgets to your Datastore to display or update dynamic data:
- Bind Data: Link widgets like lists, tables, or input fields to collections or data views.
- Field Mapping: Map specific fields to widget properties (e.g., list titles or input values).
Try it out: Bind a Simple List Widget to a collection of tasks:
- Select the Simple List Widget.
- Open the Data Tab in the Property Inspector.
- Bind it to the Tasks Collection.
4. Responsive Properties
Ensure widgets adapt to different screen sizes and layouts:
- Breakpoints: Customize widget properties for small, medium, or large screens.
- Dynamic Visibility: Show or hide widgets based on screen size.
Try it out: Set a button to hide on small screens.
- Select the button.
- In the Property Inspector, open the Responsive Tab.
- Add a rule to hide the button when the screen width is below 600px.
Tips for Customizing Widgets
- Be Consistent: Use the Theme Editor to apply consistent colors, fonts, and styles across widgets.
- Test Responsiveness: Preview your layout at different breakpoints to ensure widgets display correctly.
- Use Icons and Images: Enhance widgets with visuals from the Media Assets Library.
- Start Small: Customize basic properties first, then add workflows and data bindings as needed.
Conclusion
Customizing widgets in LiveCode Create is simple and flexible using the Property Inspector. Whether you’re changing colors, adding actions, or binding data, widgets can be tailored to create the perfect user experience for your app.
For further learning: